<template>
  <div class="container">
    <div class="image-container">
      <img
        src="@/assets/image/yoomatch/yoomatch.jpg"
        alt="yoomatch"
        class="responsive-image"
      />
    </div>
    <div class="protocol">
      YooMatch 2024. All rights reserved.
      <RouterLink :to="{ name: 'termsOfUse' }">
        <a href="#">Terms of Use</a>
      </RouterLink>
      /
      <RouterLink :to="{ name: 'privacyPolicy' }">
        <a href="#">Privacy Notice</a>
      </RouterLink>
      Help Center: YooMatch.help@gmai.com
    </div>

    <div class="button_left buttonBase" @click="downLoadApp('google_play')">
        
    </div>

    <div class="button_right buttonBase" @click="downLoadApp('apple_store')"></div>
  </div>
</template>

<script lang="ts" setup>
import api from "@/api/api";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
import { useAutoRequest } from "@/hooks/loading";
const router = useRouter();
const [loading ,home] = useAutoRequest(api.home)
const stroe = ref({
    apple_store: '',
    google_play: '',
})
const getData = async()=> {
    const data = await home({})
    console.log(data)
    stroe.value = {
        ...data
    }
}
onMounted(()=> {
    getData()
})

const downLoadApp = (type:keyof typeof stroe.value)=> {
    window.open(stroe.value[type])
}
</script>
<style scoped lang="scss">
.container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
}

.protocol {
  position: fixed;
  bottom: 5px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
}

.responsive-image {
  width: 100%; /* 使图片宽度适应容器 */
  height: 100vh; /* 保持图片比例 */
  object-fit: fill; /* 确保图片完整显示 */
}

@media (max-width: 768px) {
  /* 针对移动端的样式 */
  .responsive-image {
    transform: rotate(90deg); /* 将图片旋转90度 */
    width: 100vh; /* 高度填满视口 */
    height: 100vw; /* 保持图片比例 */
    position: absolute; /* 绝对定位以避免布局问题 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%) rotate(90deg); /* 旋转并居中 */
    max-height: 100vw; /* 限制最大高度以适应屏幕 */
  }
}

@media (max-width: 768px) {
  .protocol {
    position: fixed;
    left: -43%;
    width: 100%;
    top: 50%;
    z-index: 2; /* 确保文字在图片上层 */
    transform: translate(-50%, -50%) rotate(90deg); /* 旋转并居中 */
  }
  .buttonBase {
    transform: translate(-50%, -50%) rotate(90deg); /* 旋转并居中 */
    left: 18% !important; /* 控制按钮在移动端的水平位置 */
    width: 30vh !important;
    height: 10vw !important;
  }
  .button_left {
    top: 33vh !important;
  }
  .button_right {
    top: 67% !important;
  }
}
.buttonBase {
  position: fixed;
  width: 30vw;
  height: 10vh;
  bottom: 13.5vh;
}
.button_left {
  left: 18vw;
}
.button_right {
  right: 18vw;
}
</style>
<script setup lang="ts"></script>
